<template>
  <div
    id="LeftBarThree"
    style="width: 100%; height: 75%; background-color: rgba(29, 52, 81, 0.2)"
  ></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    barChartData: {
      type: Object,
      default: () => ({
        name: "碳排放因子",
        dataY: [],
        dataX: [],
      }),
    },
  },
  watch: {
    barChartData: {
      handler(newVal, oldVal) {
        this.init();
      },
      deep: true,
    },
  },
  data() {
    return {
      chart: null,
      options: {},
      currentIndex: 0,
      timer: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
      // this.startTooltipRotation();
    });
  },
  beforeDestroy() {
    clearInterval(this.timer); // 清除定时器
  },
  methods: {
    init() {
      this.chart = echarts.init(document.getElementById("LeftBarThree"));
      let xList = this.barChartData.dataX;
      let xData = xList.map((item, index) => {
        return {
          value: item,
          textStyle: {
            color: "#fff",
            // color: color[index],
          },
        };
      });
      let chartData = this.barChartData;
      this.options = {
        backgroundColor: "rgba(7, 29, 29,0)",
        tooltip: {
          transitionDuration: 0, //[defaule:0.4] echart防止tooltip的抖动
          confine: true, //设置tooltip不超出图表
          backgroundColor: "rgba(0,194,255,0.6)",
          borderColor: "rgba(0,194,255,0.6)",
          textStyle: {
            color: "#fff",
          },
          trigger: "item", //触发类型，默认数据项触发,可选值：'item'、'axis'、'none'
          position: function (point, params, dom, rect, size) {
            return [
              point[0] - size.contentSize[0] / 2,
              point[1] - size.contentSize[1] / 2,
            ];
          },
          formatter: function (params) {
            return params.name + ": " + params.value; // 自定义内容，去掉颜色点
          },
        },
        grid: {
          left: "5%",
          top: "18%", // 可以根据需要调整此值来改变顶部间距
          right: "3%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          data: xData, //{}
          show: true,
          type: "category",
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "rgba(255,255,255,0.2)",
            },
          },
          axisLabel: {
            interval: 0,
            rotate: 40,
            color: "#fff",
            fontSize: 14,
            padding: [10, 0, 0, 0], // 设置标签的内边距，将第一个数值调大，向下移动
            distance: 20, // 设置文字和坐标轴之间的距离，值越大距离越远
            interval: 0, // 显示所有标签
            lineHeight: 0, // 设置行高，调节行间距
          },
          splitArea: {
            show: false,
          },
          axisTick: {
            show: false, //不显示坐标轴刻度
          },
        },
        dataZoom: [
          {
            xAxisData: 0, //这里是从X轴的0刻度开始
            show: false, //是否显示滑动条
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 11, // 一次性展示12个。
          },
        ],
        yAxis: {
          show: true,
          name: "单位：kg CO2/kWh",
          nameTextStyle: {
            fontSize: 14,
            color: "#fff",
            padding: [0, 0, 5, 80],
          },
          nameLocation: "end",
          nameGap: 25,
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 2,
              type: "solid",
              color: "rgba(130,144,157,0.1)",
            },
          },
          axisLabel: {
            color: "#fff",
            fontSize: 14,
          },
          splitArea: {
            show: false,
          },
          axisTick: {
            show: false, //不显示坐标轴刻度
          },
          offset: 0, // 偏移量
        },
        series: [
          {
            type: "bar",
            barWidth: 10, // 柱子宽度
            itemStyle: {
              normal: {
                color: function (params) {
                  let tabType = localStorage.getItem("tabType");
                  if (tabType == 1) {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0, // 顶部颜色
                        color: "rgba(86, 210, 255, 1)",
                      },
                      {
                        offset: 0.5, // 底部颜色
                        color: "rgba(86, 210, 255, 0.48)",
                      },
                      {
                        offset: 1, // 底部颜色
                        color: "rgba(86, 210, 255, 0)",
                      },
                    ]);
                  } else {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0, // 顶部颜色
                        color: "rgba(109, 255, 204, 1)",
                      },
                      {
                        offset: 0.5, // 底部颜色
                        color: "rgba(156, 255, 220, 0.48)",
                      },
                      {
                        offset: 1, // 底部颜色
                        color: "rgba(156, 255, 220, 0)",
                      },
                    ]);
                  }
                },
              },
            },
            label: {
              show: true, // 不显示标签
              position: "top",
              color: "#fff",
            },
            data: chartData.dataY,
          },
        ],
      };

      this.chart.setOption(this.options);
      window.addEventListener("resize", this.chart.resize);
      let that=this;
      this.timer=setInterval(function () {
        if (xData.length < 11) {
          return;
        } else {
          // 每次向后滚动一个，最后一个从头开始。
          if (that.options.dataZoom[0].endValue == xData.length) {
            that.options.dataZoom[0].endValue = 11;
            that.options.dataZoom[0].startValue = 0;
          } else {
            that.options.dataZoom[0].endValue =
              that.options.dataZoom[0].endValue + 1;
            that.options.dataZoom[0].startValue =
              that.options.dataZoom[0].startValue + 1;
            if (that.options.dataZoom[0].endValue == xData.length) {
              that.options.dataZoom[0].endValue = 11;
              that.options.dataZoom[0].startValue = 0;
            }
          }
          that.chart.setOption(that.options);
        }
      }, 2000);
    },
    startTooltipRotation() {
      this.timer = setInterval(() => {
        this.chart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: this.currentIndex,
        });

        this.currentIndex =
          (this.currentIndex + 1) % this.barChartData.dataY.length; // 循环显示
      }, 2000); // 每2秒自动显示下一个tooltip
    },
  },
};
</script>

<style scoped>
.echarts-box {
  position: relative;
  width: 100%;
  height: 300px;
}
</style>
